<template>
  <div>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 路由管理</el-breadcrumb-item>
        <el-breadcrumb-item>代收通道路由管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="formData" ref="formData" class="demo-form-inline">
      <el-form-item label="规则名称" prop="ruleName">
        <el-input v-model="formData.ruleName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="通道类型" prop="tradeType">
        <el-select v-model="formData.tradeType" placeholder="">
          <el-option label="全部" value=""></el-option>
          <el-option :label="item" :value="index" v-show="index==1" v-for="(item, index, key) in tradeTypeItems" :key="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规则类型" prop="ruleType">
        <el-select v-model="formData.ruleType" placeholder="">
          <el-option label="全部" value=""></el-option>
          <el-option :label="item" :value="index" v-for="(item, index, key) in ruleTypeItems" :key="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formData.status" placeholder="">
          <el-option label="全部" value=""></el-option>
          <el-option :label="item" :value="index" v-show="index!=0" v-for="(item, index, key) in statusItems" :key="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTimeStr">
        <el-date-picker v-model="formData.createTimeStr" type="datetime" format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item label="-" prop="updateTimeStr">
        <el-date-picker v-model="formData.updateTimeStr" type="datetime" format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetForm('formData')">重置条件</el-button>
        <el-button type="primary" @click="addFn">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border height="500" style="width: 100%" ref="multipleTable">
      <el-table-column type="index" width="70" center="true"></el-table-column>
      <el-table-column prop="ruleKey" label="规则编号" min-width="200" center="true"></el-table-column>
      <el-table-column prop="ruleName" label="规则名称" min-width="200" center="true"></el-table-column>
      <el-table-column prop="tradeTypeStr" label="通道类型" min-width="100" center="true"></el-table-column>
      <el-table-column prop="ruleTypeStr" label="规则类型" min-width="150" center="true"></el-table-column>
      <el-table-column prop="sequence" label="执行顺序" min-width="100" center="true"></el-table-column>
      <el-table-column prop="statusStr" label="状态" min-width="100" center="true"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" min-width="180" center="true"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="180" center="true"></el-table-column>
      <el-table-column prop="remark" label="备注" min-width="120" center="true"></el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-tooltip :enterable="false" content="编辑" placement="top">
            <el-button type="primary" icon="edit" size="small" @click="handleEdit(scope.$index, scope.row, '编辑')"></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="启用" placement="top">
            <el-button type="primary" size="small" :disabled="scope.row.status === 1" @click="enableFn(scope.$index, scope.row, 1)"><i class="el-icon-caret-right"></i></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="停用" placement="top">
            <el-button type="primary" size="small" :disabled="scope.row.status === 2" @click="enableFn(scope.$index, scope.row, 2)"><i class="el-icon-circle-close"></i></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="详情" placement="top">
            <el-button type="primary" class="el-icon-information" size="small" @click="handleEdit(scope.$index, scope.row, '详情')"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>

  <!--编辑通道-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeDiolagFn" size="large">
    <add-edit-route-rules :ruleType="ruleType" :ruleId="ruleId" :buttonType="buttonType" :rmd="rmd" @chanelClose='chanelClose' ></add-edit-route-rules>
  </el-dialog>
</div>
</template>

<script>
  import { getRuleList, updateRuleStatus, getChannelCondition } from '@/services/getData'
  import addEditRouteRules from '@/page/collection-channel-management/AccessRouteManagement-child/addEditRouteRules'
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1,
      totalCount: null,
      pagesize: 10,
      is_search: false,
      dialogFormVisible: false,
      formData: {
        ruleName: '',
        tradeType: '',
        ruleType: '',
        status: '',
        updateTimeStr: '',
        createTimeStr: ''
      },
      tradeTypeItems: [],
      dialogTitle: '',
      form: {},
      rmd: null, // 时间戳 更新dialog的数据
      buttonType:'',
      ruleId: null,
      ruleType: ''
    }
  },
  components: {
    addEditRouteRules
  },
  created() {
    this.initData()
    this.statusItems = this.GLOBAL.getChanelStatus()
    this.tradeTypeItems = this.GLOBAL.getChanelType()
    this.ruleTypeItems = this.GLOBAL.getRuleType()
  },
  methods: {

    // 查询
    search() {
      this.is_search = true
      let formDataStr = this.GLOBAL.ObjectCopy(this.formData)
      formDataStr["createTimeFrom"] = this.formData["createTimeStr"] ? this.$moment(this.formData["createTimeStr"]).format('YYYYMMDD HH:mm:ss') : ''
      formDataStr["updateTime"] = this.formData["updateTimeStr"] ? this.$moment(this.formData["updateTimeStr"]).format('YYYYMMDD HH:mm:ss') : ''
      delete formDataStr["createTimeStr"]
      delete formDataStr["updateTimeStr"]
      this.loadData(formDataStr)
    },

    // 表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.search()
    },

    // 启用、停用方法
    enableFn(i, v, s) {
      // 判断你是否可以点击
      if (v.status == 1 && s == 1 ) {
        this.$message({
          type: 'error',
          message: "您的通道已启用,请选择停用功能"
        })
        return false
      } else if (v.status == 2 && s == 2 ) {
        this.$message({
          type: 'error',
          message: "您的通道已停用,请选择启用功能"
        })
        return false
      }
      let $messageDesc = s == 1 ? "启用" : "停用"
      let params = {}
      params["ruleKey"] = v.ruleKey
      params["status"] = s == 1 ? 1 : 2
      params["operatorName"] = sessionStorage.getItem('ms_username')
      params["operatedMenu"] = "通道路由规则管理"
      params["operatedButton"] = $messageDesc
      this.$confirm('您确认要'+ $messageDesc +"通道路由规则吗？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateRuleStatus(params).then(
          res => {
            if (res.resultCode == 1) {
              this.$message({
                type: 'success',
                message: $messageDesc+"成功"
              });
              this.search()
            } else {
              this.$message({
                type: 'error',
                message: res.errorDesc
              });
            }
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    closeDiolagFn() {
      this.form = {}
    },

    // 新增
    addFn() {
      this.form = {}
      this.dialogTitle = '代收通道路由规则'
      this.dialogFormVisible = true
      this.rmd = new Date().getTime()
      this.buttonType = '新增'
      this.ruleType = '1'
    },

    // 编辑方法
    handleEdit(i, v, n) {
      if(v.status == 1 && n === '编辑') {
        this.$message({
          type: 'warning',
          message: "当前规则已启用，请先停用再进行编辑"
        })
        return false
      }
      this.dialogTitle = '代收通道路由规则'
      this.dialogFormVisible = true
      this.ruleId = v.ruleId
      this.rmd = new Date().getTime()
      this.buttonType = n
      this.ruleType = v.ruleType.toString()
    },

    // 关闭弹框同一方法
    chanelClose(c){
      this.dialogFormVisible = false
      this.form = {}
      if(c != "cancel") {
        this.search()
      }
    },

    async initData() {
      try {
        this.loadData()
      } catch (err) {
        console.log('获取数据失败', err)
      }
    },
    async loadData(v) {

      try {
        let params = {
          page: this.currentPage,
          rows: this.pagesize,
          operatorName: sessionStorage.getItem('ms_username'),
          operatedMenu: "代收通道路由管理",
          operatedButton: "查询"

        }
        let obj = Object.assign(params, v)
        const res = await getRuleList(obj)

        if (res.resultCode == 1) {
          res.rows.forEach(item => {
            item.tradeTypeStr = this.GLOBAL.getChanelType(item.tradeType),
            item.ruleTypeStr = this.GLOBAL.getRuleType(item.ruleType), // 0:是  1:否
            item.statusStr = this.GLOBAL.getChanelStatus(item.status) // 0:待启用  1:启用  2:停用
          })
          this.tableData = res.rows
          this.totalCount = res.total
        } else {
          throw new Error(res.message)
        }
      } catch (err) {
        console.log('获取数据失败', err)
      }
    }
  }
}
</script>
